<template>
	<div v-if="showStatus" class="sort_page" :style="{'background-color':sortSet.themeColor}">
		<div class="top-image">
			<img :src="sortSet.bg || require('@/static/sports/sorts_top_image.png')" />
		</div>
		<div class="container">
			<div class="tab">
				<div :class="{'tab-select':tabSelect==2}" @click="changeTab(2)">勤奋榜</div>
				<div :class="{'tab-select':tabSelect==1}" @click="changeTab(1)">大神榜</div>
			</div>
			<div class="card-contain" v-if="topThree.length>0">
				<div class="card"  v-for="(item,index) in topThree">
					<div class="avatar">
						<img :src="item.user.avatar" alt=""/>
					</div>
					<span class="name">{{item.user.username}}</span>
					<span class="nums">{{tabSelect==1?item.win:item.num}}{{comText}}</span>
					<div class="logo">
						<img :src="require('@/static/sports/sorts_'+formatImage(index+1)+'.png')" />
					</div>
				</div>
			</div>
			<div class="lists" v-if="listData.length>0">
				<div class="list"  v-for="(item,index) in listData">
					<span class="id">{{item.id}}</span>
					<div class="avatar">
						<img :src="item.user.avatar" alt=""/>
					</div>
					<span class="name">{{item.user.username}}</span>
					<div class="nums">{{tabSelect==1?item.win:item.num}}{{comText}}</div>
				</div>
			</div>
			<div v-if="topThree.length==0 && listData.length==0" class="end-text" style="font-size: 30rpx; text-align: center;width:100%;height: 100rpx;">
				敬请期待更多玩家冲榜···
			</div>
			<div class="end-text">
				{{tabSelect==1?'以累计猜中次数排序':'以累计竞猜注数排序'}}<br/>榜单下次更新时间：{{updateTime}}
			</div>
		</div>
		<div style="height: 210rpx;"></div>
		<div class="list mine-info" v-if="userInfo.hasOwnProperty('id')">
			<span class="id">{{userSort}}</span>
			<div class="avatar">
				<img :src="userInfo.avatar" alt=""/>
			</div>
			<span class="name">{{userInfo.username}}</span>
			<span class="user_nums">{{userNum}}{{comText}}</span>
			<div class="btn" @click="next">去参与</div>
		</div>
		<div  class="list mine-info" v-if="!userInfo.hasOwnProperty('id')">
			<div class="no-info" @click="next">去参与</div>
		</div>
	</div>
</template>

<script>
	import{getRank , guessSportsText,guessSportsInfo} from '@/api/api.js'
	import { isWeiXin , isQianfan,proxyShareFun,countNum } from '@/until/QFH5.js'
	import { mapGetters } from 'vuex'
	import {formatTime} from '@/until/tool'
	export default{
		data(){
			return{
				tabSelect:2,
				actid:'',
				topThree:[],
				listData:[],
				userSort:'*',
				userInfo:{},
				userNum:0,
				updateTime:'',
				sortSet:{},
				showStatus: false,
				pageData:{}
			}
		},
		computed: {
			comText() {
				if(this.tabSelect==1) return '次'
				return '注'
			},
			...mapGetters(['loginInfo','siteinfo'])
		},
		methods: {
			formatTimeStr(val){
				return formatTime(val)
			},
			changeTab(val){
				this.tabSelect = val
				this.initData()
			},
			formatImage(val){
				if(val==2)return 1
				if(val==1)return 2
				return val
			},
			next(data){
				let path = '/?type=guess&plugin=sports&id='+this.actid
				this.$navigateTo({url:path})
			},
			initData(){
				let obj = {actid:this.actid,rank_type:this.tabSelect}
				getRank(obj).then(res=>{
					// console.log(res)
					this.showStatus = true
					if(res.code==0){
						if(res.data.list.length==0){
							return
						}
						this.userSort='*'
						let {list,expire,time,user_num} = res.data
						this.updateTime = this.formatTimeStr(expire)
						this.userNum = user_num
						let uid = this.userInfo.id ||  null
						// console.log('****',uid)
						list.forEach((item,index)=>{
							let id = index+1>9?index+1:'0'+(index+1)
							item.id = id
							if(uid!=null && uid==item.user_id){
								this.userSort = index+1
							}
						})
						if(list.length!=0 && this.userSort=='*'){
							this.userSort='99+'
						}
						
						let length = list.length
						if(length>3){
						  	this.topThree = list.slice(0,3)
						  	this.listData = list.slice(3,list.length)
						}else{
							this.listData = []
							let obj = {
								id:'03',
								num:'*',
								win:'*',
								user:{
									avatar:require('@/static/guess/avatar.png'),
									username:'等待冲榜中'
								}
								
							}
							switch(length){
								case 1:
									this.topThree = list;
									let first = obj
									first.id = '02'
									this.topThree.push(first)
									this.topThree.push(obj)
									break;
								case 2:
									this.topThree = list;
									this.topThree.push(obj)
									break;
								case 3:this.topThree = list;break;
								
								default:this.topThree = []
							}
						
						}
						let objData = this.topThree[1]
						this.topThree.splice(1,1)
						this.topThree.unshift(objData)
					}else{
						uni.showToast({
							title:res.text,
							icon:'none'
						})
					}					
				})
			},
			async beforeInit(){
			 let res = await	guessSportsInfo({actid: this.actid})
			 console.log('123456',res.data)
			 let {ranking_banner,ranking_bgcolor} = res.data.settings
			 this.pageData = res.data.settings
			 this.sortSet = {
				 bg:ranking_banner,
				 themeColor:ranking_bgcolor
			 }
			}
		},
		mounted() {
		   	this.beforeInit()
			
			this.userInfo =  uni.getStorageSync('wechatInfo'+this.actid)|| this.loginInfo || null
			if(isWeiXin() && this.userInfo.headimgurl!=''){
				let {headimgurl,nickname} = this.userInfo
				this.userInfo.avatar = headimgurl || undefined
				this.userInfo.username = nickname || '*'
			}
			this.initData()
			this.$setTitle('排行榜')
			let data =  {title:'排行榜',image:this.siteinfo.qiniu_url+'/work_file_/sorts_top_image.png',desc:'快来加入我们，大家一起冲冲冲！'}
			proxyShareFun(data.title,data.image,data.desc,window.location.href)
		},
		onLoad(op){
			this.actid = op.id
			countNum(this.actid)
		},
		destroyed(){
			let data =  this.pageData
			let url = window.location.origin+'/plugin-view/?type=sports&plugin=sports&id='+this.actid
			proxyShareFun(data.title, data.image, data.desc, url)
		}
	}
</script>

<style scoped>
	.sort_page{
		background-color: #2471FD;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		position: relative;
	}
	.top-image{
		line-height: 0;
	}
	.top-image img{
		width: 750rpx;
		height: 660rpx;
	}
	.container{
		width: 694rpx;
		border-radius: 30rpx;
		margin: -112rpx auto 0;
		background-color: #fff;
		position: relative;
		z-index: 9;
		padding-bottom: 1rpx;
	}
	.container .tab{
		display: flex;
		justify-content: center;
		height: 89rpx;
		padding-top: 23rpx;
	}
	.tab div{
		position: relative;
		margin: 0 20rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666;
	}
	.tab-select{
		color: #222 !important;
	}
	.tab-select::after{
		content: "";
		position: absolute;
		left: 50%;
		bottom: -16rpx;
		transform: translateX(-50%);
		width: 30rpx;
		height:6rpx;
		border-radius: 3rpx;
		background-color: #2776F9;
	}
	.card-contain{
		margin-top: 8rpx;
		height: 346rpx;
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.card{
		width: 198rpx;
		height: 304rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		position: relative;
		margin-bottom: 30rpx;
	}
	.card:nth-child(1){
		background-color: #F6FCFF;
		border-radius: 26rpx 0px 0px 26rpx;
	}
	.card:nth-child(2){
		width: 240rpx;
		height: 346rpx;
		border-radius: 26rpx;
		background-color: #FFF2EE;
	}
	.card:nth-child(3){
		background-color: #FFFBEB;
		border-radius: 0px 26rpx 26rpx 0px;
	}
	.card .avatar{
		margin: 0 auto;
		width: 114rpx;
		height: 114rpx;
		padding: 5rpx;
		border-radius: 50%;
		border: 3rpx solid #FD4F2D;
		margin-top: 73rpx;
	}
	.card .avatar img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.card:nth-child(2) .avatar{
		width: 144rpx;
		height: 144rpx;
		margin-top: 62rpx;
	}
	.card:nth-child(3) .avatar{
		width: 104rpx;
		height: 104rpx;
		margin-top: 81rpx;
	}
	.card .name{
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #222222;
		display: block;
		height: 42rpx;
		line-height: 42rpx;
		width: calc(100% - 16rpx);
		padding: 0 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}
	
	.card .nums{
		width: 100%;
		text-align: center;
		display: block;
		height:33rpx;
		line-height: 33rpx;
		font-size: 24rpx;
		color: #FF3D51;
	}
	
	.card:nth-child(2) .nums{
		margin-top: 4rpx;
	}
	.card:nth-child(3) .nums{
		margin-top: 2rpx;
	}
	.card .logo{
		position: absolute;
		top: 16rpx;
		right: 18rpx;
		width:52rpx;
		height: 56rpx;
		line-height: 0;
	}
	.card .logo img{
		width: 100%;
		height: 100%;
	}
	.card:nth-child(2) .logo{
		right: 14rpx;
	}
	.card:nth-child(3) .logo{
		right: 17rpx;
	}
	.lists{
		margin-top: 30rpx;
		padding:  0 0 1rpx 0;
	}
	.list{
		width: 632rpx;
		padding:  0 30rpx;
		margin-bottom: 30rpx;
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-family: SF Pro Display-Bold, SF Pro Display;
		font-weight: bold;
		color: #222222;
	}
	.list .id{
		/* margin-left: .3rpx; */
		width: 30rpx;
	}
	.list .avatar{
		margin-left: 20rpx;
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
		border: 2rpx solid #FF3D51;
		padding: 5rpx;
	
	}
	.list .avatar img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.list .name{
		margin-left: 20rpx;
		width: 332rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.list .nums{
		width: 130rpx;
		text-align: right;
		color: #FF3D51;
	}
	.end-text{
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-bottom: 40rpx;
	}
	.mine-info{
		position: fixed;
		left:50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 10;
		padding: 0 30rpx;
		width: 690rpx;
		height: 198rpx;
		background: #FFFFFF;
		box-shadow: 0px -12rpx 20rpx 1rpx rgba(204,204,204,0.16);
		margin-bottom: 0;
	}
	.mine-info .id{
		width: 43rpx;
		
	}
	.mine-info .name{
		width: 207rpx;
	}
	.mine-info .btn{
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #fff;
		background: #FF3D51;
		border-radius: 35rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
	}
	.mine-info .user_nums{
		display: block;
		width: 107rpx;
		font-size: 24rpx;
		text-align: right;
		color: #FF3D51;
		text-align: left;
	}
	.mine-info .no-info{
		margin-left: 95rpx;
		width: 500rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #fff;
		background: #FF3D51;
		border-radius: 45rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
	}
	
</style>